<template>
	<div class="category" style="width: 50%; margin-left: 20%; font-size: large;;">

		<el-tree :indent="16" :data="data" icon-class="el-icon-menu" node-key="id" :props="defaultProps" style="font-size: larger;"
		 :expand-on-click-node="false" :render-content="renderContent">
		</el-tree>




		<el-dialog title="修改节点" :visible.sync="editNodeDialog" width="30%">
			<el-form ref="form" :model="editForm" label-width="100px">

				<el-form-item label="节点名称">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="doEdit">修改</el-button>
				</el-form-item>
			</el-form>


		</el-dialog>



		<el-dialog title="添加节点" :visible.sync="addNodeDialog" width="30%">
			<el-form ref="form" :model="addForm" label-width="80px">
				<el-form-item label="父节点">
					<el-input v-model="parentName" disabled></el-input>
				</el-form-item>
				<el-form-item label="子节点">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="doAdd">添加</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				parentName: '',
				editParentName: '',
				data: [],
				defaultProps: {
					children: 'categoryList',
					label: 'name'
				},
				editNodeDialog: false,
				addNodeDialog: false,
				addForm: {
					name: '',
					parentId: '',
					isParent: ''
				},
				editForm: {
					id: '',
					name: '',
					parentId: '',
					isParent: '',
					sort: ''
				}

			};
		},
		created: function() {
			this.initData();
		},
		methods: {
			doEdit() {
				console.log(this.editForm);
				this.axios.post(this.$baseUrl + 'product/category/update', this.editForm).then((res) => {
					console.log(res);
					if (res.data.result) {
						this.$message('修改节点成功');
						this.editNodeDialog = false;
						this.initData();
					}
				});
			},
			doAdd() {
				console.log(this.addForm);
				this.axios.post(this.$baseUrl + 'product/category/insert', this.addForm).then((res) => {
					console.log(res);
					if (res.data.result) {
						this.$message('添加节点成功');
						this.addNodeDialog = false;
						this.initData();
					}
				});
			},
			initData() {
				this.axios.get(this.$baseUrl + "product/category/list").then((res) => {
					console.log(res);
					this.data = res.data.data;
				})
			},
			handleNodeClick(data) {
				console.log(data);
			},

			remove(node, data) {

				console.log(node);
				console.log(data);

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.$baseUrl + 'product/category/delete', data).then((res) => {
						console.log(res);
						if (res.data.result) {
							this.$message({
								type: 'success',
								message: '删除成功!',

							});
							this.initData();
						}
					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
			editNode(node, data) {


				this.editNodeDialog = true;

				this.editParentName = data.name;

				this.editForm.id = data.id;

				this.editForm.name = data.name;

				this.editForm.parentId = data.parentId;

				this.editForm.isParent = data.isParent;
				this.editForm.sort = data.sort;
				console.log(node);
				console.log(data);
			},
			addNode(node, data) {
				this.addNodeDialog = true;
				this.parentName = data.name;
				this.addForm.parentId = data.id;


				if (node.childNodes.length > 0) {
					this.addForm.isParent = true;
				} else {
					this.addForm.isParent = false;
				}

				console.log(node);
				console.log(data);
			},
			renderContent(h, { node, data, store }) {
			  return (
			    <span class="custom-tree-node">
			      <span>{node.label}</span>
			      <span>
					<el-button size="mini " type="text" circle  icon="el-icon-plus" on-click={() => this.addNode(node,data)}></el-button>
			        <el-button size="mini " icon="el-icon-edit"  type="text"   on-click={() => this.editNode(node,data)}></el-button>
			        <el-button size="mini " type="text" circle  icon="el-icon-delete" on-click={ () => this.remove(node, data) }></el-button>
			      </span>
			    </span>);
			}
		}
	};
</script>

<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
</style>
